<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>canvas 动画</title>
<style type="text/css">
/*=== base style===*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block; margin:0; padding:0;}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, img,div,span,em,i,a,input {padding: 0;margin: 0;border: none;}
ul,li {list-style: none;}
h1, h2,h3,h4, h5, h6{font-weight:normal;}
body{font-family: "微软雅黑"; font-size: 12px;}
.clearfix:after {content:"";height:0;display:block;clear:both;}
.clearfix {zoom:1;}
img{vertical-align:top;}
em,i{font-style:normal;}
a img{border:0px;}
a,a:hover,ins{ text-decoration:none;}
area{ outline:none}
.width990{width: 990px; margin: 0px auto;}
.zyp_wrap{width: 100%; margin: 0px auto;font-family: "微软雅黑"; font-size: 12px;}


.cav_wrap{width: 500px; height: 500px; margin: 30px auto;}
#cav{ border: 1px solid #ccc;}
</style>
</head>
<body>
<div class="cav_wrap">
   <canvas id="cav" width="500" height="500"></canvas>
</div>
<script type="text/javascript">
function drawBeauty(beauty){
   var mycv = document.getElementById("cav");  
   var myctx = mycv.getContext("2d");
   myctx.drawImage(beauty,100,20);
}
function load(){
var beauty = new Image();
beauty.src = "http://gtms04.alicdn.com/tps/i4/TB1tvpEGpXXXXadapXXRVNATXXX-170-280.jpg"; 
if(beauty.complete){
   drawBeauty(beauty);
}else{
   beauty.onload = function(){
     drawBeauty(beauty);
   };
   beauty.onerror = function(){
     window.alert('美女加载失败，请重试');
   };
};   
}//load
if (document.all) {
  window.attachEvent('onload', load);  
  }else {  
  window.addEventListener('load', load, false);
}
</script>
</body>
</html>